import React from "react"
import { Button, Tree,message } from 'antd'
import { DownOutlined } from '@ant-design/icons'
import './areaIndex.css'
export default function Area() {
    const treeData = [
        {
            title: 'parent 1',
            key: '0-0',
            children: [
                {
                    title: 'parent 1-0',
                    key: '0-0-0',
                    children: [
                        {
                            title: 'leaf',
                            key: '0-0-0-0',
                        },
                        {
                            title: 'leaf',
                            key: '0-0-0-1',
                        },
                        {
                            title: 'leaf',
                            key: '0-0-0-2',
                        },
                    ],
                },
                {
                    title: 'parent 1-1',
                    key: '0-0-1',
                    children: [
                        {
                            title: 'leaf',
                            key: '0-0-1-0',
                        },
                    ],
                },
                {
                    title: 'parent 1-2',
                    key: '0-0-2',
                    children: [
                        {
                            title: 'leaf',
                            key: '0-0-2-0',
                        },
                        {
                            title: 'leaf',
                            key: '0-0-2-1',
                        },
                    ],
                },
            ],
        },
    ];
    // 全局提示
    const [messageApi, contextHolder] = message.useMessage();
  const info = () => {
    messageApi.info('请选择一个区域再进行操作')
  };
    let selectArea='';
    const onSelect = (selectedKeys, info) => {
        selectArea=selectedKeys
        console.log( selectArea,info);
    };
    const addArea=()=>{
        if(selectArea==''){
            info()
        }
    }
    const upDataArea=()=>{

    }
    const deleteArea=()=>{

    }

    return <>
    {contextHolder}
        <div className="top">
            <Button type="primary" onClick={addArea}>新增</Button><span> </span>
            <Button type="primary" onClick={upDataArea}>编辑</Button><span> </span>
            <Button type="primary" onClick={deleteArea}>删除</Button></div>
        <Tree
            showLine
            switcherIcon={<DownOutlined />}
            defaultExpandedKeys={['0-0-0']}
            onSelect={onSelect}
            treeData={treeData}
        />
    </>
}